<template>
    <div>
<h1>首页--显示</h1>
商铺名称: <input type="text" v-model="dataps.names" placeholder="亲输入商铺名称">
房屋状态: <select v-model="dataps.state">
    <option value="0">请选择</option>
    <option v-for="d in Scope" :value="d.stateId">{{d.stateName}}</option>
</select>
<input type="button" value="查询" class="btn btn-success" @click="GetShow">
<input type="button" value="重置" class="btn btn-success" @click="Cz">

<a href="https://localhost:7075/api/Lod/ExecAult">导出</a>
<table class="table">
<thead>
    <tr>
        <td>商铺名称</td>
        <td>楼层</td>
        <td>业主/用户</td>
        <td>联系电话</td>
        <td>建筑/室内面积</td>
        <td>租金(元/平方)</td>
        <td>商铺状态</td>
        <td>起租时间</td>
        <td>操作</td>
    </tr>
</thead>
<tbody>
   <tr v-for="d in data">
        <td>{{d.shopName}}</td>
        <td>{{d.lc}}</td>
        <td>{{d.bossName}}</td>
        <td>{{d.phone.substring(0,3)}}****{{d.phone.substring(7,11)}}</td>
        <td>{{d.roomMj}}</td>
        <td>{{d.proce}}</td>
        <td :style="d.stateName=='出租中'?'color:green':'color:blue'">{{d.stateName}}</td>
        <td>{{d.qzDate}}</td>
        <td>
            <input type="button" value="删除" class="btn btn-success" @click="Dels(d.sid)">
            <input type="button" value="修改" class="btn btn-success" @click="Updats(d.sid)">


        </td>
    </tr>
</tbody>
</table>

当前{{dataps.pageindex}}页 显示{{dataps.pagesize}}条 一共{{dataas.listcount}}条 共{{dataas.list}}页
<input type="button" value="首页" @click="page(1)">
<input type="button" value="上一页" @click="page(dataps.pageindex-1)">
<input type="button" v-for="d in dataas.list" :value="d" @click="ymt(d)">
<input type="button" value="下一页" @click="page(dataps.pageindex+1)">
<input type="button" value="尾页" @click="page(dataas.list)">
<select v-model="dataps.pagesize" @change="Xs">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>
<input type="text" v-model="dataps.pageindex"><input type="button" value="跳转" @click="Tz">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import moment from 'moment';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(()=>{
    GetShow();
    GetScope();
})
//修改
const Updats=(mid:any)=>{
router.push({path:"/Ups",query:{id:mid}});
}
//删除
const Dels=(e:any)=>{
if(!confirm("确定要删除吗"))
{
    return;
}
axios.delete("/api/Shop/GetIsDel",{params:{id:e}}).then(res=>{
    if(res.data>0)
{
    alert("删除成功");
    GetShow();
}
else
{
    alert("删除失败");
}
})
}
//重置
const Cz=()=>{
    dataps.value.names="";
    dataps.value.state=0;
}
//房屋状态
const Scope=ref([{
    "stateId": 0,
    "stateName": ""
}])
const GetScope=()=>{
    axios.get("/api/State/GetState",{params:Scope.value}).then(res=>{
        Scope.value=res.data;
    })
}

//页码跳转
const ymt=(ids:any)=>{
    dataps.value.pageindex=ids;
    GetShow();
}
//跳转
const Tz=()=>{
    GetShow();
}
//页容量
const Xs=()=>{
    dataps.value.pageindex=1;
    GetShow();
}
//翻页
const page=(e:any)=>{
if(e>=1&&e<=dataas.value.list)
{
    dataps.value.pageindex=e;
    GetShow();
}
}

const dataps=ref({
    pageindex:1,
    pagesize:2,
    state:0,
    names:""
})

const data=ref([{
       "stateId": 2,
      "stateName": "出租中",
      "sid": 9,
      "shopName": "A-15-9",
      "lc": "1楼",
      "bossName": "贾宝玉",
      "phone": "277388493028",
      "roomMj": "19.88平方米",
      "proce": 1300,
      "staid": 2,
      "qzDate": "2025-03-04T00:00:00"
}])

const dataas=ref({
    listcount:0,
    list:0
})

const GetShow=()=>{
    axios.get("/api/Shop/GetShopShow",{params:dataps.value}).then(res=>{
        data.value=res.data.list;
        dataas.value.listcount=res.data.listcount;
        dataas.value.list=Math.ceil(dataas.value.listcount/dataps.value.pagesize);
        
    })
}

</script>

<style scoped>

</style>